/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import Container from "../../../components/common/Container";
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import styles from '../Entry_Pro.less';
import cile from '../../../assets/cile.png';
import request from '../../../utils/request';
import MyModal from '../../../components/common/MyModal';
import Echarts_tu from '../echarts2/Echarts_tu';
import moment from 'moment';
import fengshan from '../../../assets/fengshan.png';
import fengshan2 from '../../../assets/fengshan2.gif';

import cileRED from '../../../assets/cileRED.png';
var timeval
class Entry4 extends Component {
    state = {
        jinshuill: true,
        MyModal1Visible: false,
        echartsData: {},
        unit: ""
    }
    componentDidMount() {
        request({
            url: '/web/redstar/drawing/drawing104',
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    time:data.ret.time,
                    jinshuill: data.ret.HXPLC_4_95,
                    shalvqi: data.ret.HXPLC_4_107,
                    qingshuichi: data.ret.HXPLC_4_109,

                    tiaojiechi: data.ret.HXPLC_4_96,
                    tiaojiechikg: data.ret.HXPLC_4_8 == 'False' ? false : true,
                    suan1kg: data.ret.HXPLC_4_59 == 'False' ? false : true,
                    suan2kg: data.ret.HXPLC_4_61 == 'False' ? false : true,
                    suanyewei: data.ret.HXPLC_4_101,

                    huanyuanchi: data.ret.HXPLC_4_97,
                    huanyuanchikg: data.ret.HXPLC_4_11 == 'False' ? false : true,

                    zhonghechi: data.ret.HXPLC_4_98,
                    zhonghechikg: data.ret.HXPLC_4_14 == 'False' ? false : true,

                    xuningchikg: data.ret.HXPLC_4_17 == 'False' ? false : true,

                    huidiaochi: data.ret.HXPLC_4_99,
                    huidiaochikg: data.ret.HXPLC_4_26 == 'False' ? false : true,

                    zhongjianyewei: data.ret.HXPLC_4_100,

                    shalvtishengbeng1kg: data.ret.HXPLC_4_63 == 'False' ? false : true,
                    shalvtishengbeng2kg: data.ret.HXPLC_4_66 == 'False' ? false : true,

                    waipaibeng1kg: data.ret.HXPLC_4_75 == 'False' ? false : true,
                    waipaibeng2kg: data.ret.HXPLC_4_78 == 'False' ? false : true,

                    fanxibeng1kg: data.ret.HXPLC_4_69 == 'False' ? false : true,
                    fanxibeng2kg: data.ret.HXPLC_4_72 == 'False' ? false : true,

                    painibeng1kg: data.ret.HXPLC_4_20 == 'False' ? false : true,
                    painibeng1kg: data.ret.HXPLC_4_23 == 'False' ? false : true,

                    chushuibeng1kg: data.ret.HXPLC_4_2 == 'False' ? false : true,
                    chushuibeng2kg: data.ret.HXPLC_4_5 == 'False' ? false : true,

                    PACdata: data.ret.HXPLC_4_104,
                    PACkgcile: data.ret.HXPLC_4_44 == 'False' ? false : true,
                    PACkg: data.ret.HXPLC_4_41 == 'False' ? false : true,

                    PAMdata: data.ret.HXPLC_4_105,
                    PAMkgcile: data.ret.HXPLC_4_50 == 'False' ? false : true,
                    PAMkg: data.ret.HXPLC_4_47 == 'False' ? false : true,

                    chongbujidata: data.ret.HXPLC_4_106,
                    chongbujikgcile: data.ret.HXPLC_4_56 == 'False' ? false : true,
                    chongbujikg: data.ret.HXPLC_4_53 == 'False' ? false : true,

                    jiandata: data.ret.HXPLC_4_103,
                    jiankgcile: data.ret.HXPLC_4_38 == 'False' ? false : true,
                    jiankg: data.ret.HXPLC_4_35 == 'False' ? false : true,

                    huanyuanjidata: data.ret.HXPLC_4_102,
                    huanyuanjikgcile: data.ret.HXPLC_4_32 == 'False' ? false : true,
                    huanyuanjikg: data.ret.HXPLC_4_29 == 'False' ? false : true,



                    // suan1:data.ret.HXPLC_1_71 == 'False'?false:true,

                })
            }
        })
        console.log(this.props.tabKey)
        if(this.props.tabKey == 4) {
            timeval = setInterval(() => {
                request({
                    url: '/web/redstar/drawing/drawing104',
                    method: 'POST',
                    data: {}
                }).then(data => {
                    console.log(data)
                    if (data.rc === 0) {
                        this.setState({
                            time:data.ret.time,
                            jinshuill: data.ret.HXPLC_4_95,
                            shalvqi: data.ret.HXPLC_4_107,
                            qingshuichi: data.ret.HXPLC_4_109,
        
                            tiaojiechi: data.ret.HXPLC_4_96,
                            tiaojiechikg: data.ret.HXPLC_4_8 == 'False' ? false : true,
                            suan1kg: data.ret.HXPLC_4_59 == 'False' ? false : true,
                            suan2kg: data.ret.HXPLC_4_61 == 'False' ? false : true,
                            suanyewei: data.ret.HXPLC_4_101,
        
                            huanyuanchi: data.ret.HXPLC_4_97,
                            huanyuanchikg: data.ret.HXPLC_4_11 == 'False' ? false : true,
        
                            zhonghechi: data.ret.HXPLC_4_98,
                            zhonghechikg: data.ret.HXPLC_4_14 == 'False' ? false : true,
        
                            xuningchikg: data.ret.HXPLC_4_17 == 'False' ? false : true,
        
                            huidiaochi: data.ret.HXPLC_4_99,
                            huidiaochikg: data.ret.HXPLC_4_26 == 'False' ? false : true,
        
                            zhongjianyewei: data.ret.HXPLC_4_100,
        
                            shalvtishengbeng1kg: data.ret.HXPLC_4_63 == 'False' ? false : true,
                            shalvtishengbeng2kg: data.ret.HXPLC_4_66 == 'False' ? false : true,
        
                            waipaibeng1kg: data.ret.HXPLC_4_75 == 'False' ? false : true,
                            waipaibeng2kg: data.ret.HXPLC_4_78 == 'False' ? false : true,
        
                            fanxibeng1kg: data.ret.HXPLC_4_69 == 'False' ? false : true,
                            fanxibeng2kg: data.ret.HXPLC_4_72 == 'False' ? false : true,
        
                            painibeng1kg: data.ret.HXPLC_4_20 == 'False' ? false : true,
                            painibeng1kg: data.ret.HXPLC_4_23 == 'False' ? false : true,
        
                            chushuibeng1kg: data.ret.HXPLC_4_2 == 'False' ? false : true,
                            chushuibeng2kg: data.ret.HXPLC_4_5 == 'False' ? false : true,
        
                            PACdata: data.ret.HXPLC_4_104,
                            PACkgcile: data.ret.HXPLC_4_44 == 'False' ? false : true,
                            PACkg: data.ret.HXPLC_4_41 == 'False' ? false : true,
        
                            PAMdata: data.ret.HXPLC_4_105,
                            PAMkgcile: data.ret.HXPLC_4_50 == 'False' ? false : true,
                            PAMkg: data.ret.HXPLC_4_47 == 'False' ? false : true,
        
                            chongbujidata: data.ret.HXPLC_4_106,
                            chongbujikgcile: data.ret.HXPLC_4_56 == 'False' ? false : true,
                            chongbujikg: data.ret.HXPLC_4_53 == 'False' ? false : true,
        
                            jiandata: data.ret.HXPLC_4_103,
                            jiankgcile: data.ret.HXPLC_4_38 == 'False' ? false : true,
                            jiankg: data.ret.HXPLC_4_35 == 'False' ? false : true,
        
                            huanyuanjidata: data.ret.HXPLC_4_102,
                            huanyuanjikgcile: data.ret.HXPLC_4_32 == 'False' ? false : true,
                            huanyuanjikg: data.ret.HXPLC_4_29 == 'False' ? false : true,
        
        
        
                            // suan1:data.ret.HXPLC_1_71 == 'False'?false:true,
        
                        })
                    }
                })
            },10000)
    
        }else {
            clearInterval(timeval)
        }

    }

    componentWillUnmount(){
        clearInterval(timeval)
    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };

    onEcharts = (code, unit) => {
        request({
            url: '/web/redstar/plchistory/getPlcHistoryData',
            method: 'POST',
            data: {
                deviceId: 'PLCGK217',
                endDatetimeStr: moment().format("YYYY-MM-DD HH:mm:ss"),
                factorCodes: code,
                pageIndex: 1,
                pageSize: 9999999,
                startDatetimeStr: moment().subtract(3, "hour").format("YYYY-MM-DD HH:mm:ss")

            }
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    MyModal1Visible: true,
                    echartsData: data.ret,
                    unit: unit,
                    title: data.ret.useName
                })
            }
            console.log(data)

        })
    }
    render() {



        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '92vh';
        let tableHeight = 170;
        if (width > 1367) {
            tableHeight = 220;
            containerHeight = '92vh';
        }





        return (
            <div>
                {
                    this.state.MyModal1Visible &&
                    <MyModal
                        width={1200}
                        visible={this.state.MyModal1Visible}
                        title={this.state.title}
                        footerShow={false}
                        destroyOnClose={true}
                        onCancel={this.ModalCancel.bind(this, 'MyModal1Visible')}

                    >
                        <Echarts_tu
                            data={this.state.echartsData}
                            unit={this.state.unit}
                        />
                    </MyModal>

                }
                <Container
                    header={true}
                    style={{ height: containerHeight }}
                >
                    <div className={styles.tu1} style={{ width: "100%", height: "92vh", position: 'relative' }}>
                    <div style={{ height:20,position: 'absolute', top: "1%", right: "11%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>数据节点时间 : </div>
                    <div style={{ height:20,position: 'absolute', top: "1%", right: "2%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>{moment(Number(this.state.time)).format("YYYY-MM-DD HH:mm:ss")}</div>
                    <div style={{ width: 20, height:20, backgroundColor:'red', position: 'absolute', top: "6%", left: "1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                    <div style={{ width: 20, height:20, backgroundColor:'green', position: 'absolute', top: "1%", left: "1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                    <div style={{ height:20,position: 'absolute', top: "6%", left: "3%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>关闭</div>
                    <div style={{ height:20, position: 'absolute', top: "1%", left: "3%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>运行</div>
                        {/* #1酸 */}
                        <img src={this.state.suan1kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '21%', left: '16.1%' }} />
                        <img src={this.state.suan2kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '21%', left: '19.7%' }} />
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "38.5%", left: "17%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_101', 'm')}>{this.state.suanyewei}m</div>
                        {/* <div style={{ width: 20, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "38.5%", left: "20%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>m</div> */}

                        {/* 进水流量 */}
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "40.5%", left: "7%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_95', 'm³/h')}>{this.state.jinshuill}m³/h</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "45.5%", left: "7%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>进水流量</div>

                        {/* 调节池 */}
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.tiaojiechikg ? 'green' : 'red', position: 'absolute', top: "43.4%", left: "28.1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "72.5%", left: "26.1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_96', 'PH')}>{this.state.tiaojiechi}</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "76.5%", left: "26.1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>PH</div>
                        <img src={this.state.tiaojiechikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "57%", left: "27%", width: '3%' }} />

                        {/* 还原池 */}
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.huanyuanchikg ? 'green' : 'red', position: 'absolute', top: "43.4%", left: "32%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "72.5%", left: "30%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_97', 'ORP')}>{this.state.huanyuanchi}</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "76.5%", left: "30%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>ORP</div>
                        <img src={this.state.huanyuanchikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "57%", left: "31%", width: '3%' }} />


                        {/* 中和池 */}
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.zhonghechikg ? 'green' : 'red', position: 'absolute', top: "43.4%", left: "35.6%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "72.5%", left: "34%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_98', 'PH')}>{this.state.zhonghechi}</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "76.5%", left: "34%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>PH</div>
                        <img src={this.state.zhonghechikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "57%", left: "34.5%", width: '3%' }} />

                        {/* 絮凝池 */}
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.xuningchikg ? 'green' : 'red', position: 'absolute', top: "43.4%", left: "39.2%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        {/* <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "72.5%", left: "38%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>123m³/h</div>
                            <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "76.5%", left: "38%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>进水流量</div> */}
                        <img src={this.state.xuningchikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "57%", left: "38.5%", width: '3%' }} />
                        {/* 回调池 */}
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.huidiaochikg ? 'green' : 'red', position: 'absolute', top: "43.6%", left: "48.1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "67.5%", left: "47.1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_99', 'PH')}>{this.state.huidiaochi}</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "71.5%", left: "47.1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>PH</div>
                        <img src={this.state.huidiaochikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "54%", left: "47%", width: '3%' }} />

                        {/* 中间水箱液位 */}
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "58.5%", left: "50.5%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_100', 'm')}>{this.state.zhongjianyewei}m</div>

                        {/* 砂滤提升泵 */}
                        <img src={this.state.shalvtishengbeng1kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '53.8%', left: '56%' }} />
                        <img src={this.state.shalvtishengbeng2kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '63.9%', left: '56%' }} />

                        {/* 砂滤器 */}
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "51.5%", left: "60.5%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_107', 'm³/h')}>{this.state.shalvqi}m³/h</div>

                        {/* 清水池 */}
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "60.5%", left: "80.5%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_109', 'm')}>{this.state.qingshuichi}m</div>

                        {/* 外排泵 */}
                        <img src={this.state.waipaibeng1kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '55.8%', left: '87.9%' }} />
                        <img src={this.state.waipaibeng2kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '63.8%', left: '87.9%' }} />

                        {/* 反洗泵 */}
                        <img src={this.state.fanxibeng1kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '71.4%', left: '71.4%' }} />
                        <img src={this.state.fanxibeng2kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '77.5%', left: '71.2%' }} />

                        {/* 排泥泵1 */}
                        <img src={this.state.painibeng1kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '79.8%', left: '48.4%' }} />

                        {/* 排泥泵2 */}
                        <img src={this.state.painibeng2kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '81.5%', left: '16.6%' }} />

                        {/* 出水泵 */}
                        <img src={this.state.chushuibeng1kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '63.9%', left: '19%' }} />
                        <img src={this.state.chushuibeng2kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '69.8%', left: '18.6%' }} />



                        {/* PAC */}
                        <img src={this.state.PACkgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '22%', left: '44.6%' }} />
                        <div style={{ width: "1.4%", height: "3%", backgroundColor: this.state.PACkg ? 'green' : 'red', position: 'absolute', top: "23.4%", left: "47.8%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "37.5%", left: "45.5%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_104', 'm')}>{this.state.PACdata}m</div>
                        <img src={this.state.PACkg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "32%", left: "47.5%", width: '2%' }} />

                        {/* PAM */}
                        <img src={this.state.PAMkgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '22%', left: '52.2%' }} />
                        <div style={{ width: "1.4%", height: "3%", backgroundColor: this.state.PAMkg ? 'green' : 'red', position: 'absolute', top: "23.4%", left: "55.5%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "39.5%", left: "53%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_105', 'm')}>{this.state.PAMdata}m</div>
                        <img src={this.state.PAMkg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "32%", left: "55%", width: '2%' }} />

                        {/* 重捕剂 */}
                        <img src={this.state.chongbujikgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '22%', left: '60.3%' }} />
                        <div style={{ width: "1.4%", height: "3%", backgroundColor: this.state.chongbujikg ? 'green' : 'red', position: 'absolute', top: "23.4%", left: "63.5%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "39.5%", left: "61%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_106', 'm')}>{this.state.chongbujidata}m</div>
                        <img src={this.state.chongbujikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "32%", left: "63.5%", width: '2%' }} />

                        {/* 碱 */}
                        <img src={this.state.jiankgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '22%', left: '67.5%' }} />
                        <div style={{ width: "1.4%", height: "3%", backgroundColor: this.state.jiankg ? 'green' : 'red', position: 'absolute', top: "23.4%", left: "70.6%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "39.5%", left: "69%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_103', 'm')}>{this.state.jiandata}m</div>
                        <img src={this.state.jiankg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "32%", left: "70.5%", width: '2%' }} />

                        {/* 还原剂 */}
                        <img src={this.state.huanyuanjikg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '22%', left: '74.4%' }} />
                        <div style={{ width: "1.4%", height: "3%", backgroundColor: this.state.huanyuanjikg ? 'green' : 'red', position: 'absolute', top: "23.4%", left: "77.6%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <div style={{ width: 50, height: 20, backgroundColor: 'blue', position: 'absolute', top: "39.5%", left: "75%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_102', 'm')}>{this.state.huanyuanjidata}m</div>
                        <img src={this.state.huanyuanjikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "32%", left: "77.5%", width: '2%' }} />



                    </div>

                </Container>
            </div>
        )


    }
}
export default Entry4;

